<template>
  <div class="homes">
    <van-nav-bar title="网格视图" >
<!--      <van-nav-bar title="网格视图" left-arrow @click-left="onClickLeft">-->
<!--      <template #right>-->
<!--        <div class="nav-right">网格报表</div>-->
<!--      </template>-->
    </van-nav-bar>
    <div class="area">
      <div class="title">{{region.regionName}}</div>
      <div class="change" @click="toArea">
        <van-icon size="14" name="exchange" color="#ffffff"/>
        <div class="change-title">切换</div>
      </div>
    </div>
    <div class="contents">
      <div class="date" @click="dateClick">
        <div class="date-title">统计日期</div>
        <div class="date-date">{{ date.showDate }}</div>
      </div>

      <div class="list">
        <div class="section" v-for="(item, index) in titleList" :key="index">
          <div class="section-title">
            <div class="section-title-back">
              <div class="title-icon"></div>
              <div class="title-title">{{item.name}}</div>
            </div>
            <div class="section-title-back" @click="toMore(item.id)">
              <div class="more-title">更多</div>
              <van-icon size="10" name="arrow" color="#a2c5ff"/>
            </div>
          </div>
          <div class="list-item" v-for="(iItem, iIndex) in item.list" :key="iIndex">
            <div class="item-title">{{ iItem.title }}</div>
            <div class="value-back">
              <div class="value-title">
                当前值：
                <div class="value">{{iItem.targetValue}}</div>
              </div>
              <div class="value-title">排名：
                <div class="rank">{{iItem.orderRatio}}</div>
              </div>
            </div>
          </div>

          <div v-if="item.id == 2" style="visibility:hidden" class="list-item" v-for="(iItem, iIndex) in item.list" :key="iIndex">
            <div class="item-title">{{ iItem.title }}</div>
            <div class="value-back">
              <div class="value-title">
                当前值：
                <div class="value">{{iItem.targetValue}}</div>
              </div>
              <div class="value-title">排名:
                <div class="rank">{{iItem.orderRatio}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <van-popup v-model:show="showPicker" position="bottom">
      <van-datetime-picker v-model="date.currentDate" type="year-month" @cancel="cancel" @confirm="confirm"/>
    </van-popup>
  </div>
</template>

<!--<script lang="ts">-->
<script>
import "@/api/index"
import { reactive, toRefs,onMounted} from "vue"
import {useRouter, useRoute} from "vue-router"
import moment from "moment"
import GetNetUtil from "../../../utils/GetNetUtil";
import store from "@/store/index"
//2个资费满意度 取新表  ads
export default {
  setup() {
    let state = reactive({
      listData: [1, 2, 3, 4, 5, 6],
      showPicker: false,
      date: {
        currentDate: new Date(moment().format('YYYY/MM/DD')),
        minDate: new Date(1990, 0, 1),
        maxDate: new Date(moment().format('YYYY/MM/DD')),
        showDate: moment().format('YYYY-MM')
      },
      titleList: [
        {
          name: 'KPI考核',
          id: 1,
          list:[]
        },
        {
          name: '触点满意度及投诉', id: 2,
          list:[]
        }
      ],
      region:{regionId:'',regionName:''},
      selects:[]
    });

    const router = useRouter();
    function getParams(){
      // let params = sessionStorage.getItem("params");
      let selects = sessionStorage.getItem("selects");
      let regionId = sessionStorage.getItem("regionId");
      let showDate = sessionStorage.getItem("showDate");
      if(selects == undefined || regionId == undefined ){
        getCurrentRegion();
      }else {
        let array =  JSON.parse(selects);
        state.selects = array;
        let size = state.selects.length;
        let region = state.selects[size -1];
        state.region.regionId = region.regionId;
        state.region.regionName = region.regionName;
        state.date.showDate = showDate;
        getTargetList()
      }
    }
    onMounted(() => {
      getParams();
    })


    //查询当前归属地市 以及 时间
    function getCurrentRegion(){
      GetNetUtil.requestPost("/serviceManager/getCurrentRegion", "", "", getCurrentRegion)
      async function getCurrentRegion(resp) {
        console.log("resp",resp);
        if (resp.resultCode === "200") {
          state.region.regionId = resp.data.regionId;
          state.region.regionName = resp.data.regionName;
          state.date.showDate = resp.data.statMonth;
          state.selects = [{regionId:resp.data.regionId,regionName:resp.data.regionName}]
          getTargetList();
        }else {
          console.log("查询当前归属地市出错",resp);
        }
      }
    }

    //查询数据列表
    function getTargetList(){
      let regionId = state.region.regionId;
      let statMonth = state.date.showDate.replace("-","");
      state.titleList[0].list=[];
      state.titleList[1].list=[];
      GetNetUtil.requestPost("/serviceManager/getTargetList", "", {statMonth:statMonth,regionId:regionId}, getTargetList)
      async function getTargetList(resp) {
        if (resp.resultCode === "200") {
          let list = resp.data;
          list.sort(sortBy("id"));
          list.forEach((item, index) => {
            if(item.id != 7){
              state.titleList[0].list.push(item);
            }else {
              state.titleList[1].list.push(item);
            }
          });
          console.log("titleList",state.titleList)
        }else {
          console.log("查询当前归属地市出错",resp);
        }
      }
    }

    //排序行数
    function sortBy(field) {
      return (x, y) => {
        return x[field] - y[field];
      }
    }
    const onClickLeft = () => history.back()

    //更多
    function toMore(id) {
      let data = state.titleList[id-1];
      sessionStorage.setItem("regionId",state.region.regionId);
      sessionStorage.setItem("regionName",state.region.regionName);
      sessionStorage.setItem("showDate",state.date.showDate);
      sessionStorage.setItem("selects",JSON.stringify(state.selects));
      sessionStorage.setItem("id",id);
      sessionStorage.setItem("title",data.name);

      router.push({
        name: 'service-more',
        params:{
          regionId:state.region.regionId,
          regionName:state.region.regionName,
          showDate:state.date.showDate,
          selects:JSON.stringify(state.selects),
          id:id,
          title:data.name
        }
      })
    }
    //选择地址
    function toArea() {
      sessionStorage.setItem("regionId",state.region.regionId);
      sessionStorage.setItem("regionName",state.region.regionName);
      sessionStorage.setItem("routeName",'service-manager');
      sessionStorage.setItem("showDate",state.date.showDate);
      sessionStorage.setItem("selects",JSON.stringify(state.selects));
      router.push({
        name: 'areas',
        params: {//传值进去
        }
      })
    }

    function _addZero(data) {
      if (data < 10) {
        return "0" + data
      } else {
        return data
      }
    }
    //时间控件
    function dateClick() {
      state.showPicker = true
    }
    //选中时间确定动作
    function confirm(val) {
      let currentDate = val
      let selectDate =currentDate.getFullYear() + "-" + _addZero(currentDate.getMonth() + 1)
      state.date.showDate = selectDate
      state.date.currentDate = currentDate
      getTargetList();
      state.showPicker = false
    }

    function cancel() {
      state.showPicker = false
    }


    return {
      ...toRefs(state),
      onClickLeft,
      toMore,
      toArea,
      dateClick,
      cancel,
      confirm
    }
  },
}
</script>

<style lang="scss" scoped>
.homes {
  width: 100%;
  height: 100%;
  background: #eaeaea;
  overflow: hidden;

  .nav-right {
    font-size: 14px;
    color: #427ce7;
  }

  .area {
    height: 54px;
    background-color: #427ce7;
    display: flex;
    align-items: center;

    .title {
      font-size: 14px;
      color: #ffffff;
      margin: 10px;
    }

    .change {
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid #ffffff;
      padding: 5px;
      height: 30px;
      width: 84px;
      border-radius: 17px;

      .change-title {
        font-size: 12px;
        color: #ffffff;
      }
    }
  }

  .contents {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #ffffff;
    width: 100%;
    height: calc(100% - 104px);
    overflow-y: auto;

    .date {
      margin: 10px;
      display: flex;
      align-items: center;

      .date-title {
        font-size: 14px;
        color: #929292;
        margin-right: 10px;
      }

      .date-date {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 30px;
        margin-left: 10px;
        padding-left: 10px;
        padding-right: 10px;
        font-size: 14px;
        color: #427ce7;
        border: 1px solid #a2c5ff;
        border-radius: 15px;
      }
    }

    .list {
      width: 100%;
      .section {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        justify-content: space-around;

        .section-title {
          width: 100%;
          margin: 10px;
          display: flex;
          align-items: center;
          justify-content: space-between;

          .section-title-back {
            display: flex;
            align-items: center;

            .title-icon {
              width: 10px;
              height: 30px;
              background-color: #007cff;
            }

            .title-title {
              margin-left: 10px;
              font-size: 18px;
              font-weight: bold;
              color: black;
            }

            .more-title {
              font-size: 14px;
              color: #a2c5ff;
            }
          }
        }

        .list-item {
          display: flex;
          flex-direction: column;
          align-items: center;
          width: 48%;

          .item-title {
            font-size: 14px;
            color: #427ce7;
            width: 100%;
            display: flex;
            margin-left: 10px;
            justify-content: flex-start;
          }

          .value-back {
            height: 64px;
            width: 100%;
            background-color: #EFF4FE;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            color: #929292;
            font-size: 16px;
            margin: 10px;
            border-radius: 5px;

            .value-title {
              display: flex;
              margin-left: 10px;
              font-size: 16px;

              .value {
                color: black;
                font-size: 16px;
              }

              .rank {
                color: green;
                font-size: 16px;
              }
            }
          }
        }
      }
    }
  }
}

</style>